<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{ margin: 0;padding: 0;list-style: none;text-decoration: none;}
			.in,.in_active{
				 display: none;
				 width: 400px;
				 height:400px;
				 background: #ccc;
				 font-size: 50px;
				 line-height: 400px;
				 text-align: center;
			}
			.in_active{
				 display: block;
			}
			.con,.con_active{
				 color: black;
				 background-color: #ccc;
			}
			.con_active{
				 color: white; 
			}
			nav{
				margin-bottom: 20px;
			}
			nav a{
				padding: 10px;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div class="box" id="box">
			 
			 <nav class="conList">
				  <a class="con_active" href="#">按钮 1</a>
				  <a class="con" href="#">按钮 2</a>
				  <a class="con" href="#">按钮 3</a>
			 </nav> 
			 <ul class="list">
				  <li class="in_active">选项卡1</li>
				  <li class="in">选项卡2</li>
				  <li class="in">选项卡3</li>
			 </ul>
		</div>
	</body>
	<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function Tab(obj){
			 this.oList = obj.getElementsByTagName('ul')[0];
			 this.aIn = this.oList.getElementsByTagName('li');
			
			this.oConList = obj.getElementsByTagName('nav')[0];
			 this.aCon = this.oConList.getElementsByTagName('a');
			
			 this.count = this.aIn.length;
			
			this.cur = 0;
			 var _this = this;
			
			for(var i = 0; i < this.count; i++){
				  //设置索引
				  this.aCon[i].index = i;
				  //给按钮添加事件
				  this.aCon[i].onclick = function(){
				   _this.cur = this.index;
				   _this.switch();
				  }
			 }
			}
			Tab.prototype.switch = function(){
				for(var i = 0; i < this.count; i++){
				  this.aIn[i].className = 'in';
				  this.aCon[i].className = 'con';
				 }
				 this.aIn[this.cur].className = 'in_active';
				 this.aCon[this.cur].className = 'con_active'; 
			}
			var oBox = document.getElementById('box');
			var tab1 = new Tab(oBox);
		
	</script>
</html>
